<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
			<el-form-item label="登录账号">
				{{ form.accountId }}
			</el-form-item>
			<el-form-item label="姓名">
				{{ form.userName }}
			</el-form-item>
			<el-form-item label="用户昵称">
				<el-input v-model="form.byName" clearable placeholder="用户昵称" maxlength="20"></el-input>
				<div class="el-form-item-msg">用户昵称</div>
			</el-form-item>
			<el-form-item label="工号">
				<el-input v-model="form.workId" clearable placeholder="请填写工号" maxlength="50"></el-input>
			</el-form-item>
			<el-form-item label="钉钉账号">
				<el-input v-model="form.ddAccountId" clearable placeholder="请填写钉钉账号" maxlength="50"></el-input>
			</el-form-item>
			<el-form-item label="微信账号">
				<el-input v-model="form.wxAccountId" clearable placeholder="请填写微信账号" maxlength="50"></el-input>
			</el-form-item>
			<el-form-item label="电子邮件" prop="email">
				<el-input v-model="form.email" clearable placeholder="请填写电子邮件" maxlength="50"></el-input>
			</el-form-item>
			<el-form-item label="手机号" prop="phone">
				<el-input v-model="form.phone" clearable placeholder="请填写手机号" maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="座机号码" prop="tel">
				<el-input v-model="form.tel" clearable placeholder="座机号码" maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="兼职部门">
				<el-cascader v-model="form.otherDeptId" :options="depts" :props="deptsProps" clearable style="width: 100%;" placeholder="请选择兼职部门"></el-cascader>
			</el-form-item>
			<el-form-item label="管理部门">
				<el-cascader v-model="form.manageDept" :options="depts" :props="deptsProps" clearable style="width: 100%;" placeholder="请选择管理部门"></el-cascader>
			</el-form-item>
			<el-form-item label="禁用IP">
				<el-input type="textarea" v-model="form.noIp" placeholder="例如：192.168.1.1-192.168.1.20" clearable></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
import {verifyEmail, verifyPhone} from "@/utils/verificate";
import tool from "@/utils/tool";

export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "baseinfo",
			titleMap: {
				baseinfo: '基本信息设置'
			},
			visible: false,
			isSaveing: false,
			form: {
				accountId: "",
				userName: "",
				byName: "",
				workId: "",
				email: "",
				phone: "",
				tel: "",
				ddAccountId: "",
				wxAccountId: "",
				noIp: '',
				otherDeptId: "",
				manageDept: ""
			},
			depts: [],
			deptsProps: {
				multiple: true,
				label: "deptName",
				value: "deptId",
				checkStrictly: true
			},
			rules: {
				email: [
					{validator: verifyEmail, trigger: 'blur'}
				],
				phone: [
					{validator: verifyPhone, trigger: 'blur'}
				]
			},
		}
	},
	mounted() {
		this.getDept();
	},
	methods: {
		//表单提交方法
		open() {
			this.visible = true;
			return this
		},
		async getDept() {
			var res = await this.$API.system.unitDept.list.get();
			this.depts = res.data;
		},
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					if (this.form.manageDept) {
						this.form.manageDept = this.form.manageDept.join(",");
					}
					if (this.form.otherDeptId) {
						this.form.otherDeptId = this.form.otherDeptId.join(",");
					}
					var res = await this.$API.system.user.updateUserInfo.post(this.form);
					this.isSaveing = false;
					if (res.code == 200) {
						this.$emit('success', this.form, this.mode)
						this.visible = false;
						this.$message.success(res.message)
					} else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
				} else {
					return false;
				}
			})
		},
		//表单注入数据
		setData(data) {
			this.form.accountId = data.accountId;
			this.form.userName = data.userName;
			this.form.ddAccountId = data.ddAccountId;
			this.form.wxAccountId = data.wxAccountId;
			this.form.byName = data.byName;
			this.form.workId = data.workId;
			this.form.email = tool.crypto.convertData(data.email);
			this.form.phone = tool.crypto.convertData(data.phone);
			this.form.noIp = data.noIp;
			this.form.tel = data.tel;
			if (data.otherDeptId) {
				this.form.otherDeptId = data.otherDeptId.split(",");
			}
			if (data.manageDept) {
				this.form.manageDept = data.manageDept.split(",");
			}
		}
	}
}
</script>

<style>
</style>
